<template>
  <div>
    <van-nav-bar left-text="返回" right-text="添加" left-arrow @click-left="onClickLeft" class="navBar"
      @click-right="show = true" />

    <div>
      <van-swipe-cell v-for="(v,i) in arrList" :key="i" class="">
        <div class="content">
          <p class="block"> <span class="content_key">电梯名</span><span>{{v.name}}</span> </p>
          <p class="block"> <span class="content_key">楼栋</span><span>{{v.build}}</span> </p>
          <p class="block"> <span class="content_key">运行时间</span><span>{{v.startTime}} - {{v.endTime}}</span> </p>
          <p class="block"> <span class="content_key">内线号码</span><span>{{v.paint}}</span> </p>
          <p class="block"> <span class="content_key">外线号码</span><span>{{v.perimeter}}</span> </p>
          <p class="block"> <span class="content_key">类型</span><span>{{v.status}}</span> </p>
        </div>
        <template #right>
          <van-button square text="删除" type="danger" class="button" />
          <van-button square text="编辑" color="#13b5b1" class="button" />
        </template>
      </van-swipe-cell>
    </div>

    <van-popup v-model="show" round position="bottom" :style="{ height: '400px' }" closeable>
      <div class="cell_group">
        <van-cell-group>
          <van-field label-width='60px' label="电梯名" v-model="info.name" />
          <van-field label-width='60px' label="楼栋" v-model="info.build" />
          <!-- <van-field label-width='60px' label="运行时间" v-model="info.time" /> -->
          <van-cell title="运行时间" title-class="titleClass">
            <div class="timebox">
              <span class="text" v-if="info.startTime"
                @click="choesTime = true;choseValue = 'startTime'">{{info.startTime}}</span>
              <span v-else @click="choesTime = true;choseValue = 'startTime'">开始时间</span>
              <span class="unit"> - </span>
              <span class="text" v-if="info.endTime"
                @click="choesTime = true;choseValue = 'endTime'">{{info.endTime}}</span>
              <span v-else @click="choesTime = true;choseValue = 'endTime'">结束时间</span>
            </div>
          </van-cell>
          <van-field label-width='60px' label="内线号码" v-model="info.paint" />
          <van-field label-width='60px' label="外线号码" v-model="info.perimeter" />
          <van-cell title="类型" title-class="titleClass">
            <van-radio-group v-model="info.status" direction="horizontal">
              <van-radio name="职工电梯" icon-size="16px" checked-color="#13b5b1">职工电梯</van-radio>
              <van-radio name="患者电梯" icon-size="16px" checked-color="#13b5b1">患者电梯</van-radio>
            </van-radio-group>
          </van-cell>
        </van-cell-group>
      </div>
      <p class="footerBtn">
        <van-button plain hairline type="danger" round @click="show = false">取消</van-button>
        <van-button plain hairline type="primary" round @click="submit">提交</van-button>
      </p>
    </van-popup>


    <van-popup v-model="choesTime" round position="bottom">
      <van-datetime-picker v-model="currentTime" type="time" title="选择时间" @cancel="choesTime = false"
        @confirm="confirm" />
    </van-popup>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: false,
        info: {

        },
        choesTime: false,
        currentTime: '',
        choseValue: '',

        arrList: [{
          name:'1号电梯',
          build:'外科一号楼',
          startTime:'08:00',
          endTime:'22:00',
          paint: 15656566565,
          perimeter: 16565655656,
          status: '职工电梯'
        }]
      }
    },
    methods: {
      confirm(value) {
        this.choesTime = false
        this.info[this.choseValue] = value
      },
      submit() {
        this.arrList.push(this.info)
        this.show = false
      },
      onClickLeft() {
        this.$router.back()
      }
    }
  }
</script>

<style lang='less' scoped>
  /deep/.van-nav-bar__text,
  /deep/.van-nav-bar .van-icon {
    color: #13b5b1;
  }

  .navBar {
    margin-bottom: 48px;
  }

  .cell_group {
    height: 600px;
    padding-top: 80px;

  }

  .titleClass {
    flex: none;
    width: 120px;
    margin-right: 24px;
  }

  /deep/.van-cell__value {
    display: flex;
    align-items: center;
  }

  .timebox {
    display: flex;
    align-items: center;

    span {
      width: 120px;
      text-align: left;
    }

    .text {
      color: #333333;
    }
  }

  .footerBtn {
    display: flex;
    padding: 0 32px;
    justify-content: space-between;

    button {
      width: 250px;
    }
  }

  .content {
    background: white;
    padding: 12px 24px;
  }

  .button {
    height: 100%;
  }

  .block {
    height: 80px;
    display: flex;
    align-items: center;
  }

  .content_key {
    width: 150px;
    margin-right: 24px;
    color: #666666;
  }
  /deep/ .van-swipe-cell{
    margin-bottom: 24px;
  }
</style>